<template>
    <div class="sjplatformAdd">
        <div class="title-div">任务信息</div>
        <el-form label-width="100px">
            <el-form-item label="任务名称：">
                <span>{{ projectStore.taskModel.taskName }}</span>
            </el-form-item>
            <el-form-item label="任务描述：">
                <span>{{ projectStore.taskModel.mark }}</span>
            </el-form-item>
            <template v-if="taskData.childTaskList.length>0">
                <div class="title-div">子任务</div>
                <el-table :data="taskData.childTaskList" v-loading="loading" empty-text="暂无数据" stripe border>
                    <el-table-column label="序号" width="60">
                        <template #default="{ $index }">
                            {{ $index + 1  }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskName" label="任务名称" class-name="left-align" />
                    <el-table-column prop="startTime" label="开始时间" width="140">
                        <template #default="{ row }">
                            <span>{{ commonUtil.Methods.formatDate(row.startTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="140">
                        <template #default="{ row }">
                            <span>{{ commonUtil.Methods.formatDate(row.endTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="progress" label="进度" width="140">
                        <template #default="{ row }">
                            <span>{{ row.progress == null ? '0%' : row.progress + '%' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="personNames" label="负责人" width="140"/>
                </el-table>
            </template>
            <template  v-else>
                <el-form-item label="任务进度：">
                    <el-input-number v-model="projectStore.taskDoModel.progress" :precision="2" :min="0" :max="100"
                        :controls="false" />&nbsp;&nbsp;&nbsp;%
                </el-form-item>
                <el-form-item label="完成情况：">
                    <el-input v-model="projectStore.taskDoModel.mark" type="textarea" />
                </el-form-item>
            </template>
        </el-form>
        <template v-if="taskData.taskDoList.length > 0">
            <div class="title-div">填报记录</div>
            <el-form class="el-form-li" label-width="120px" v-for="d in taskData.taskDoList">
                <el-form-item label="填报人：">
                    <span>{{ d.addUserName }}</span>
                </el-form-item>
                <el-form-item label="填报进度：">
                    <template v-if="d.addUserId == loginStore.currentUser.id && isEdit">
                        <el-input-number v-model="d.progress" :precision="2" :min="0" :max="100"
                            :controls="false" />&nbsp;&nbsp;&nbsp;%
                    </template>
                    <template v-else>
                        <span>{{ d.progress }}%</span>
                    </template>
                </el-form-item>
                <el-form-item label="完成情况：">
                    <template v-if="d.addUserId == loginStore.currentUser.id && isEdit">
                        <el-input v-model="d.mark" type="textarea" />
                    </template>
                    <template v-else>
                        <span>{{ d.mark }}</span>
                    </template>
                </el-form-item>
                <template v-if="d.addUserId == loginStore.currentUser.id">
                    <el-form-item>
                        <div class="button-div">
                            <el-tooltip content="删除记录" placement="bottom" effect="light">
                                <i class="del-icon" @click="del(d)"></i>
                            </el-tooltip>
                            <el-tooltip content="修改记录" v-if="!isEdit" placement="bottom" effect="light">
                                <i class="edit-icon" @click="edit(d)"></i>
                            </el-tooltip>
                            <el-tooltip content="提交" v-if="isEdit" placement="bottom" effect="light">
                                <i class="confirm-icon" @click="submitDo(d)"></i>
                            </el-tooltip>
                        </div>
                    </el-form-item>
                </template>
            </el-form>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import commonUtil from "../../../utils/common";
import { useTaskTable } from "../../../hooks/ProjectManager/Do/useTaskTable";
import { useLoginUserStore } from '../../../store';

let loginStore = useLoginUserStore();
let isEdit = ref(false);
let loading = ref(false);
let hasChild=ref(false);
let { taskData, projectStore, getTaskDosByTaskId, updateTaskDo, delTaskDoById, getDeepChildTasksByPId } = useTaskTable(0, 10);
getTaskDosByTaskId(projectStore.taskModel.id);
getDeepChildTasksByPId(projectStore.taskModel.id).then(()=>{
    hasChild.value=taskData.childTaskList.length>0;
});

//删除记录
function del(data) {
    delTaskDoById(data.id).then(() => {
        getTaskDosByTaskId(projectStore.taskModel.id);
    });
}
let progress = null;
let mark = '';
//编辑修改记录
function edit(data) {
    progress = data.progress;
    mark = data.mark;
    isEdit.value = true;
}

//提交修改记录
async function submitDo(data) {
    if (progress != data.progress || mark != data.mark) {
        await updateTaskDo(data);
    }
    isEdit.value = false;
}
defineExpose({hasChild});
</script>